<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author LYS
-->
<template>
  <PageWrapper :sidebarWidth="230" :contentFullHeight="true" :fixedHeight="true">
    <vue-office-docx
      v-if="isdocx"
      :src="url"
      @rendered="rendered"
      @error="error"
      style="width: 100%; height: 100%"
    />
    <vue-office-excel
      v-if="isexcel"
      :src="url"
      @rendered="rendered"
      @error="error"
      style="width: 100%; height: 100%"
    />
    <vue-office-pdf
      v-if="ispdf"
      :src="url"
      @rendered="rendered"
      @error="error"
      style="width: 100%; height: 100%"
    />
    <video v-if="isvideo" :src="url" controls style="width: 100%; height: 100%"></video>
    <img v-if="isimage" :src="url" style="width: 100%; height: 100%" />
    <JsonPreview v-if="docType === 'json'" :data="txtData" style="width: 100%; height: 100%" />
    <MarkDown
      v-if="docType === 'md'"
      v-model:value="txtData"
      ref="markDownRef"
      style="width: 100%; height: 100%"
    />
  </PageWrapper>
  <div
    id="pptx"
    v-if="docType === 'ppt' || docType === 'pptx'"
    style="width: 100%; height: 100%; overflow: hidden"
  ></div>
  <Loading :loading="loading" :absolute="absolute" :tip="tip" />
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsPlmDocPLMDocInfoView',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, onMounted, computed, ref, nextTick } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  // 引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx';
  // 引入相关样式
  import '@vue-office/docx/lib/index.css';
  // 引入VueOfficeExcel组件
  import VueOfficeExcel from '@vue-office/excel';
  // 引入相关样式
  import '@vue-office/excel/lib/index.css';
  // 引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf';

  import { useQuery } from '/@/hooks/web/usePage';
  import { JsonPreview } from '/@/components/CodeEditor';

  import { Loading } from '/@/components/Loading';

  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';

  import { useRouter } from 'vue-router';
  import { otherHttp } from '/@/utils/http/axios';

  import { decryptRSA } from '/@/utils/encrypt/RSA';
  import { useGlobSetting } from '/@/hooks/setting';
  const { createMessage, showMessage } = useMessage();
  const { ctxAdminPath } = useGlobSetting();

  let router = useRouter();

  const query = useQuery();

  const showError = ref(false);

  console.log(query.value);

  const url = ref('');
  const docType = ref('');
  const docTypes = ['doc', 'docx'];
  const excelTypes = ['xls', 'xlsx'];
  const pdfTypes = ['pdf', 'ppt', 'pptx'];
  const videoTypes = ['mp4', 'avi', 'rmvb', 'wmv'];
  const imageTypes = ['jpg', 'png', 'gif', 'bmp'];
  const txtData = ref('');

  const isdocx = computed(() => {
    return docTypes.includes(docType.value || '');
  });
  const ispdf = computed(() => {
    return pdfTypes.includes(docType.value || '');
  });
  const isexcel = computed(() => {
    return excelTypes.includes(docType.value || '');
  });
  const isimage = computed(() => {
    return imageTypes.includes(docType.value || '');
  });
  const isvideo = computed(() => {
    return videoTypes.includes(docType.value || '');
  });
  const rendered = () => {
    console.log('渲染完成');
    loading.value = false;
  };
  const error = () => {
    console.log('渲染SB');
    loading.value = false;
  };

  let loading = ref(false);
  let absolute = ref(false);
  let tip = ref('加载中...');

  onMounted(async () => {
    const params = decryptRSA(query.value.params);
    debugger;
    console.log('onMounted', params);
    if (params === 'false') {
      createMessage.error('参数解析失败请刷新后重试！');
      return;
    }

    loading.value = true;
    // const resData = await pLMDocInfo(JSON.parse(params));
    const docInfo = JSON.parse(params);

    url.value = `${ctxAdminPath}/plm/file/view?docCode=${docInfo.docCode}&docVer=${docInfo.docVer}&docType=${docInfo.docType}&bviewPdf=${docInfo.bviewPdf}`;

    docType.value = docInfo.docType;
    if ('md' === query.value.docType || 'json' === query.value.docType) {
      otherHttp
        .get({
          url: url.value,
          baseURL: '',
        })
        .then((res) => {
          txtData.value = res;
          loading.value = false;
        });
    }
  });
</script>
